<template>
	<view class="page-box">
		<view class="top-style">
			<view style="width: 3rem;" @click="backToLast">
				<image src="/static/images/left.png" class="left-icon"></image>
			</view>
			<view v-for="(item,index) in Url" :key="index">
				<view v-show="index==page" class="title">{{item.title}}</view>
			</view>
		</view>
		<!--个人信息清单页 -->
		<view class="web-view-container" v-for="(item,index) in Url" :key="index">
			<!-- <web-view v-if="page >= 0 && page < Url.length" :src="Url[page].url" :fullscreen="false"
				class="web-view-content"></web-view> -->
			<iframe v-if="index==page" :src="item.url" width="100%" frameborder="0"
				style="height: calc(100vh - 3.5rem);"></iframe>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { onLoad } from '@dcloudio/uni-app'

	// 控制显示哪个html 初始-1
	const page = ref(-1)
	onLoad((options : { index ?: string }) => {
		// 获取 URL 参数中的 phone
		if (Object.prototype.hasOwnProperty.call(options, 'index')) {
			page.value = Number(options.index)
		}
	})

	interface Html {
		url : string,
		title : string
	}
	const { t } = useI18n()
	const Url = ref<Html[]>([
		{
			url: "http://pages.dpltoy.com/html2/privacyPolicy.html",
			title: t('privacyPolicy')
		},
		{
			url: "http://pages.dpltoy.com/html2/userAgreement.html",
			title: t('userAgreement')
		},
		{
			url: "http://pages.dpltoy.com/html/thirdParty.html",
			title: t('thirdPartySharing')
		},
		{
			url: "http://pages.dpltoy.com/html/infoList.html",
			title: t('personalInformation')
		},
		{
			url: "http://47.119.43.199/html/aboutDpl.html",
			title: t('aboutDapiaoliang')
		},
		{
			url: "http://pages.dpltoy.com/html/aboutApp.html",
			title: t('aboutApp')
		},
		{
			url: "http://pages.dpltoy.com/html2/reportingRules.html",
			title: t('aboutReport')
		},
	])
	const backToLast = () => {
		// console.log("11111111111111","点击了")
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.page-box {
		width: 100%;
		height: 100%;
		/*微信小程序无法使用本地资源图片作为背景图 使用base64格式*/
		background-image: url('');
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;
		padding: 2rem 0 0 0;
		/* #ifdef  MP-WEIXIN*/
		// padding-top: 3.5rem;
		/* #endif*/
	}

	.top-style {
		width: 100%;
		// margin-bottom: 2rem;
		display: flex;
	}

	.left-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin-left: 0.5rem;
		/* #ifdef  MP-WEIXIN*/
		margin: 0rem 0 0 0.5rem;
		/* #endif*/
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 3rem);
		line-height: 1.5rem;
		font-size: 1rem;
		font-weight: 600;
		text-align: center;
	}
	
	.web-view-container {
	  background-color: #fff;
	  margin: 0 9.6rpx; // 将0.3rem转换为rpx (假设设计稿基准为750rpx)
	  // height: calc(100vh - 700rpx); // 调整为rpx单位
	  
	  // 针对不同平台的特殊处理
	  @media screen and (min-width: 320px) and (max-width: 375px) {
	    // height: calc(100vh - 600rpx);
	  }
	}
	
	.web-view-content {
	  width: 100%;
	  height: 100%;
	  margin-top: 64rpx;
	}
	
</style>